<template>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      <span :style="{ textDecoration: todo.completed? 'line-through' : 'none' }">
        {{ todo.text }}
      </span>
      <input type="checkbox" v-model="todo.completed" />
      <button @click="deleteThisTodo(todo.id)">删除</button>
    </li>
  </ul>
</template>

<script setup>
import { defineEmits, defineProps } from 'vue';

// 直接使用 defineProps 定义属性，无需将返回值赋给 props 变量
defineProps({
  todos: {
    type: Array,
    required: true
  }
});

const emits = defineEmits(['delete-todo']);

const deleteThisTodo = (id) => {
  emits('delete-todo', id);
};
</script>

<style scoped>
ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

li span {
  flex: 1;
  margin-right: 10px;
}

input[type="checkbox"] {
  margin-right: 10px;
}

button {
  padding: 6px 12px;
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #c82333;
}
</style>    